import React from 'react';
import * as Bootstrap from 'react-bootstrap';

import './BaseStep.less';

export default class BaseStepContainer extends React.Component {

    constructor(props) {
        super(props);
        let self = this;

        this.state = {};
        this.state.self = self;
        this.state.steps = [{
            stepName: "Introduction",
            display: "介绍"
        }, {
            stepName: "EducationWork",
            display: "教育工作经历"
        }, {
            stepName: "Project",
            display: "项目经验"
        }, {
            stepName: "Technology",
            display: "技术"
        }];
    };

    renderTitle({steps, stepName, stepIndex}) {
        let {display} = steps[stepIndex];

        return (
            <h1 className="text-center step-title">{display}</h1>
        );
    }

    renderBreadcrumb({steps, stepName, stepIndex}) {
        let breadcrumbItems = [];

        steps.map((item, index)=> {
            let breadcrumbItem;
            if (stepIndex == index) {
                breadcrumbItem = (
                    <Bootstrap.Breadcrumb.Item key={index} active>
                        {item.display}
                    </Bootstrap.Breadcrumb.Item>);
            } else {
                breadcrumbItem = (
                    <Bootstrap.Breadcrumb.Item key={index} onClick={()=>this.changeStep(this, index)}>
                        {item.display}
                    </Bootstrap.Breadcrumb.Item>);
            }
            breadcrumbItems.push(breadcrumbItem);
        });

        return (
            <Bootstrap.Breadcrumb>
                {breadcrumbItems}
            </Bootstrap.Breadcrumb>
        );

    }


    renderPager({steps, stepName, stepIndex}) {

        return (
            <Bootstrap.Pager>
                <Bootstrap.Pager.Item previous href="#" disabled={(0 == stepIndex)}
                                      onClick={()=>this.changeStep(this, stepIndex - 1)}>
                    &larr;上一页
                </Bootstrap.Pager.Item>
                <Bootstrap.Pager.Item next href="#" disabled={(steps.length - 1 == stepIndex)}
                                      onClick={()=>this.changeStep(this, stepIndex + 1)}>
                    下一页 &rarr;
                </Bootstrap.Pager.Item>
            </Bootstrap.Pager>
        );
    }

    render() {
        const {steps, stepName} = this.state;
        const stepIndex = this.getStepIndex(stepName);

        let title = this.renderTitle({steps, stepName, stepIndex});
        let breadcrumb = this.renderBreadcrumb({steps, stepName, stepIndex});
        let pager = this.renderPager({steps, stepName, stepIndex});
        let content = this.contentRender();

        return (
            <Bootstrap.Grid>
                <Bootstrap.Row>
                    <Bootstrap.Col md={12}>
                        {title}
                    </Bootstrap.Col>
                </Bootstrap.Row>
                <Bootstrap.Row>
                    <Bootstrap.Col md={12}>
                        {breadcrumb}
                    </Bootstrap.Col>
                </Bootstrap.Row>
                <Bootstrap.Row>
                    <Bootstrap.Col md={12}>
                        {content}
                    </Bootstrap.Col>
                </Bootstrap.Row>
                <Bootstrap.Row componentClass="hr">
                </Bootstrap.Row>
                <Bootstrap.Row>
                    <Bootstrap.Col md={12}>
                        {pager}
                    </Bootstrap.Col>
                </Bootstrap.Row>
            </Bootstrap.Grid>
        );
    }

    getStepIndex(stepName) {
        const {steps} = this.state;
        let stepIndex = -1;
        steps.map((item, index)=> {
            if (stepName == item.stepName) {
                stepIndex = index;
                return false;
            }
        });
        return stepIndex;
    }

    changeStep(e, stepIndex) {
        const {steps} = this.state;
        if (0 <= stepIndex && stepIndex <= steps.length) {
            this.props.history.push("/" + steps[stepIndex].stepName);
        }
    }

}